<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>日志管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
	<!-- 查询开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  	<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form"  id="searchFrm">
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">客户名称</label>
	      <div class="layui-input-inline">
	        <input type="text" name="customername"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">联系人电话</label>
	      <div class="layui-input-inline">
	        <input type="text" name="phone"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    </div>
	  <div class="layui-form-item" style="text-align: center;">
	    <div class="layui-input-block">
	      <button type="button" class="layui-btn" id="doSearch">查询</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
	<!-- 查询结束 -->
	<!-- 数据表格开始 -->
 	<div id="add" style="display: none;" lay-filter="add">
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="add">添加</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">批量删除</button>
	</div>
	
	
	<table class="layui-hide" id="customer" lay-filter="customer"></table>
	
	
	
	<div id="toolBar" style="display: none;" lay-filter="toolBar">
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="update">修改</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
	</div>
	<!-- 数据表格结束 -->
	<!-- 添加和修改开始 -->
<div id="dataFrmContent" style="padding: 10px;display: none;" >
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm" >
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">客户名称</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		        <input type="text" name="customername" lay-verify="required" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">公司电话</label>
		      <div class="layui-input-inline">
		        <input type="text" name="telephone"   placeholder="公司电话" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">邮编</label>
		      <div class="layui-input-inline">
		        <input type="tel" name="zip" placeholder="邮编" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		 </div>
		<div class="layui-form-item">
			<label class="layui-form-label">公司地址</label>
			<div class="layui-input-block">
				<input type="text" name="address" lay-verify="title" autocomplete="off"
					placeholder="请输入公司地址" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">联系人</label>
				<div class="layui-input-inline">
					<input type="text" name="connectionperson" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">联系人电话</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email"  lay-verify="email" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">开户银行</label>
				<div class="layui-input-inline">
					<input type="text" name="bank" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">帐号</label>
				<div class="layui-input-inline">
					<input type="text" name="account" lay-verify="number"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">传真</label>
				<div class="layui-input-inline">
					<input type="text" name="fax" lay-verify="number"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			 <label class="layui-form-label">是否有效</label>
			    <div class="layui-input-block">
			      <input type="radio" name="available" value="1" title="是" checked="">
			      <input type="radio" name="available" value="0" title="否">
			    </div>
		</div>
		<div class="layui-form-item" style="text-align: center;">
			<button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			<button type="reset" class="layui-btn layui-btn-warm">重置</button>
		</div>
	</form>
	</div>
	<!-- 添加和修改结束-->
	
	<script src="/resources/layui/layui.js" charset="utf-8"></script>
	
	<script type="text/javascript">
	layui.use([ 'element', 'layer', 'jquery', 'form', 'table','laydate' ],
			function() {
				var element = layui.element;
				var layer = layui.layer;
				var $ = layui.jquery;
				var laydate = layui.laydate;
				var form = layui.form;
				var table = layui.table;
				var laydate=layui.laydate;
				//渲染时间选择器
				
				var tableIns=table.render({
				    elem: '#customer'  //指渲染的目标  
				    ,url:'/customer/loadAllCustomer'//请求地址
				    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
				    ,height:'full-200'//设置高度    
				 	,page:true//开启分页
				 	,title:"用户列表"  //设置导出execl时的标题
				 	,text:"查询无数据" //如果列表里面数据为空时显示的数据
				 	,toolbar:"#add"//设置显示工具条并设置表头左边的工具类
				 	,defaultToolbar:['filter','print']  //设置默认工具条的显示和顺序
				    ,cols : [ [
				    	 {type:'checkbox'},
				        {field: 'id', title: 'ID', minWidth:80, align:"center"},
		                {field: 'customername', title: '客户名称', minWidth:100, align:"center"},
		                {field: 'zip', title: '客户邮编', minWidth:100, align:"center"},
		                {field: 'address', title: '客户地址', minWidth:100, align:"center"},
		                {field: 'telephone', title: '客户电话', minWidth:100, align:"center"},
		                {field: 'connectionperson', title: '客户联系人', minWidth:100, align:"center"},
		                {field: 'phone', title: '联系人电话', minWidth:100, align:"center"},
		                {field: 'bank', title: '开户行', minWidth:100, align:"center"},
		                {field: 'account', title: '账户', minWidth:100, align:"center"},
		                {field: 'email', title: '邮箱', minWidth:100, align:"center"},
		                {field: 'fax', title: '传真', minWidth:100, align:"center"},
		                {field : 'available',width : 100,align : 'center',title : '是否可用',templet:function(d){
		    				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
		    			}}, 
		                {title: '操作', minWidth:185, templet:'#toolBar',fixed:"right",align:"center"}
		            ] ]
		        });
				
				  //查询
				  $("#doSearch").click(function(){
					  var params=$("#searchFrm").serialize();
					  tableIns.reload({url: '/customer/loadAllCustomer?'+params});
				  });	
	
	
					 //监听行工具栏的事件
					  table.on('tool(customer)', function(obj){
						  var data = obj.data; //获得当前行数据
						    switch(obj.event){
						      case 'delete':
						    	  layer.confirm('是否删除这个客户？',{icon:3, title:'提示信息'},function(index){
						                 $.post("/customer/deleteCustomer",{
						                     id : data.id  //将需要删除的id作为参数传入
						                 },function(data){
						                	tableIns.reload();
						                	layer.msg(data.msg);
						                    layer.close(index);
						                 	})
						            	});
						      			break;
						      			
						      case 'update':
						    	 	toUpdate(data);
						      		break;
						     
						    };
						}); 
					 
					  var url;//提交的url
					  var index;//弹出层的索引
					 
					  table.on('toolbar(customer)', function(obj){
						    switch(obj.event){
						      case 'add':
						        toAdd();
						      break;
						      case 'delete':
						    	  withdelete();
						       /*  layer.msg('批量删除');
						        var checkStatus = table.checkStatus('customer');//test就是<table id="test">
								layer.msg(JSON.stringify(checkStatus.data)); */
						      break;
						    };
						  });
					  	//批量删除
					  	function withdelete(){
					  		url="/customer/updateCustomer";
							index=layer.open({
								type:1,//弹出层的类型
								title:'修改用户',
								content:$("#dataFrmContent"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									form.val("dataFrm",data);
								}
							})
					  	}	
					  
					  
					  	//修改
						function toUpdate(data){
							url="/customer/updateCustomer";
							index=layer.open({
								type:1,//弹出层的类型
								title:'修改用户',
								content:$("#dataFrmContent"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									form.val("dataFrm",data);
								}
							})
						}
					  
						function toAdd(){
							url="/customer/addCustomer";
							index=layer.open({
								type:1,//弹出层的类型
								title:'添加用户',
								content:$("#dataFrmContent"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									$("#dataFrm")[0].reset();
								}
							})
						}
					  
						//保存
						form.on("submit(doSubmit)",function(obj){
							
							$.post(url,obj.field,function(result){
								if(result.code>0){
									layer.msg(result.msg);
								}
								tableIns.reload();
								layer.close(index);
							})
							return false;//禁用同步提交方式
						});
						
				});
	
	
	 
	</script>
</body>
</html>